<template>
    <el-dialog title="管理微信客服" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="5vh" :before-close="beforeClose" :close-on-click-modal="true">
        <div class="dialogVue">
            <div class="stepContent">
                <div class="inpVue">
                    <div class="label">AI客服描述</div>
                    <textarea placeholder="输入客服的介绍，可填写使用者姓名，联系电话等基本信息。" v-model="name" :maxlength="50"></textarea>
                </div>
                <div class="inpVue">
                    <div class="flex_between align_center">
                        <div class="label">私聊开场白(添加微信好友后，将自动给用户发送开场白)</div>
                        <el-switch v-model="openingStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                    </div>
                    <textarea v-model="openingRemarks" :maxlength="80"></textarea>
                </div>
                <div class="inpVue">
                    <div class="label" style="margin-bottom: 10px;">关联知识库</div>
                    <el-select v-model="datasetId" placeholder="请选择知识库" filterable  style="width: 100%;" @change="handleChange" clearable>
                        <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>    
                <div class="inpVue" style="margin-top: 20px;">
                    <div class="flex_between align_center">
                        <div class="label">开启AI回复</div>
                        <el-switch v-model="aiStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                    </div>
                    <div style="font-size: 12px; color: #999; padding-top: 10px;">关闭后，AI 将不会对客户回复消息</div>
                </div> 
                <div class="inpVue">
                    <div class="label">AI角色模型选择</div>
                    <div class="selectVue flex_wrap flex_between" style="margin-top: 10px;">
                        <div class="select" v-for="(item, index) in promptList" :key="index" :class="{active: modelId===item.id}" @click="modelId=item.id">
                            <div class="flex" style="padding-bottom: 10px">
                                <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.name }}</span>
                                <span style="color: #101010; font-size: 12px; font-weight: 600; padding: 0 10px">{{ item.sex }}</span>
                                <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.age }}岁</span>
                            </div>
                            <div class="li">{{ item.answerMethod }}</div>
                            <div class="li">{{ item.style }}</div>
                            <div class="li">{{ item.language }}</div>
                        </div>
                    </div>
                </div>  
                <div style="height: 20px;"></div>
            </div>
            <div class="btnVue flex_center">
                <div class="cancel" @click="beforeClose">取消</div>
                <div style="width: 20px;"></div>
                <div class="btn" @click="editFun">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span v-else>确定</span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>


<script>
import { toast } from '@/common/tools'
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
    },
    data(){
        return {
            promptList: [],
            datasetList: [],
            name: "",
            openingStatus: false,
            openingRemarks: "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。",
            datasetId: "",
            aiStatus: true,
            modelId: "",
            loading: false,
            id: "",
            groupOpeningRemarks: "",
            groupOpeningStatus: "",
        }
    },
    methods: {
        // 获取提示词列表
        getPromptWord(){
            this.$post("/front/prompt").then(res=>{
                this.promptList = res.data.obj
            })
        },

        // 获取知识库列表
        getRepositoryList(){
            this.$post("/front/dataset/datasetList", {
                pageNum: 1,
                pageSize: 1000
            }).then(res=>{
                this.datasetList = res.data.obj.list
            })
        },

        getDetail(id){
            this.$post("front/userWechat/wechatDetail", {
                id: id
            }).then(res=>{
                if(res.data.code===0) {
                    console.log(res.data.obj)
                    this.datasetId = res.data.obj.datasetId
                    this.name = res.data.obj.name
                    this.aiStatus = res.data.obj.aiStatus === 1 ? true : false
                    this.openingStatus = res.data.obj.openingStatus === 1 ? true : false
                    this.modelId = res.data.obj.promptId
                    this.id = res.data.obj.id
                    this.groupOpeningRemarks = res.data.obj.groupOpeningRemarks
                    this.groupOpeningStatus = res.data.obj.groupOpeningStatus
                }
            })
        },

        handleChange(e){
            this.datasetId = e
        },

        beforeClose(){
            this.datasetId = ""
            this.name = ""
            this.aiStatus = true
            this.openingStatus = false
            this.modelId = ""
            this.openingRemarks = "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。"
            this.$emit("beforeClose")
        },

        // 确认按钮
        editFun(){
            if(!this.name) return toast(1, "请输入AI客服描述")
            if(this.openingStatus && !this.openingRemarks) return toast(1, "请输入私聊开场白")
            // if(this.groupOpeningStatus && !this.groupOpeningRemarks) return toast(1, "请输入群聊开场白")
            if(this.loading) return
            this.loading = true
            this.$post("/front/userWechat/updateWechat", {
                name: this.name,
                promptId: this.modelId,  //AI模板选择
                openingRemarks: this.openingRemarks, //开场白
                groupOpeningStatus: this.groupOpeningStatus ? 1 : 0,
                groupOpeningRemarks: this.groupOpeningRemarks,
                aiStatus: this.aiStatus ? 1 : 0,
                openingStatus: this.openingStatus ? 1 : 0,
                datasetId: this.datasetId,
                id: this.id
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    this.beforeClose()
                    toast(0, "修改成功")
                    this.$emit("callback")
                } else {
                    toast(1, res.data.msg)
                }
            })
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-dialog) {
    width: 880px !important;
    height: 80vh !important;
    border-radius: 10px;
    box-sizing: border-box
}
:deep(.el-dialog__body) {
    padding: 0 20px;
}

.stepContent {
    width: 100%;
    height: calc(80vh - 64px - 40px - 40px - 20px);
    position: relative;
    overflow-y: scroll;
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 12px;
        }
        textarea {
            width: 100%;
            height: 60px;
            border: #DCDFE6 1px solid;
            display: block;
            box-sizing: border-box;
            resize: none;
            border-radius: 4px;
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            padding: 10px;
            font-size: 13px;
            line-height: 1.4;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .selectVue {
        width: 100%;
        height: 400px;
        margin-top: 10px;
        padding-bottom: 100px;
        .select {
            width: 405px;
            height: 120px;
            border-radius: 6px;
            border: 1px solid #EEE;
            margin-bottom: 10px;
            cursor: pointer;
            padding: 10px;
        }
        .active {
            border: #0147fd 1px solid;
            background: rgba(1,71,253, 0.1);
        }
        .li {
            font-size: 12px;
            color: #444;
            padding-top: 6px;
            line-height: 1.2;
        }
    }
    
}
.btnVue {
        width: 100%;
        height: 40px;
        position: absolute;
        left: 0;
        bottom: 20px;
        background: #fff;
        z-index: 999;
        .cancel,.btn {
            width: 250px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            cursor: pointer;
        }
        .cancel {
            background: #f5f5f5;
        }
        .btn {
            background: #0147fd;
            color: #fff;
            span {
                color: #fff;
            }
        }
    }
.stepContent::-webkit-scrollbar {
    width: 0;
    height: 0;
}

</style>